<template>
  <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="优惠卷"></myHead>
    <section v-if="coupon.length>=1">
      <couponItem v-for="(x,y) in coupon" :data="x" :key="y"></couponItem>
    </section>
    <div class="empty" v-if="coupon.length<1">
      <img src="../../../static/img/shopno001.png" alt="">
      <p>暂无优惠券</p>
    </div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import couponItem from "../../components/ClientComponents/coupon/couponItem";
  export default {
    name: "coupon",
    components:{
      couponItem,
      myHead
    },
    data(){
      return {
        coupon:[]
      }
    },
    created(){
      // 请求优惠券列表
      this.$myAxios('index/coupon/index','post',{
        user_id:this.$myStorage.query()
      }).then(res=>{
        if (res.data.state == 1) {
          var arr = res.data.address;
          for (var i = 0;i < arr.length-1;i++) {
            for (var j = 0;j < arr.length-i-1;j++) {
              if (arr[j].deadline < arr[j+1].deadline) {
                var num = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = num;
              }
            }
          }
          this.coupon = arr;
        }else {

        }
      })
    },
    methods:{

    }
  }
</script>

<style scoped>
  .wrap {
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F5F5F5;
  }
  .wrap>section {
    width: 100%;
    box-sizing: border-box;
    padding: .15rem;
  }
  .empty {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: .3rem;
  }
  .empty>img {
    width: 70%;
    margin-bottom: .3rem;
  }
  .empty>p {
    font-size: .16rem;
    color: #999999;
  }
</style>
